ol.control.DrawTools = function (options) {
    var element = $("<ul/>").addClass(options.className);

    if($(".control-full-screen").length>0) element.css("right", "250px");

    var drawType = [{
        "code": "Point",
        "label": "点",
        "icon": "icon-draw-point"
    }, {
        "code": "LineString",
        "label": "线",
        "icon": "icon-draw-line"
    }, {
        "code": "Polygon",
        "label": "面",
        "icon": "icon-draw-polygon"
    }];

    for(var i=0, len=drawType.length;i<len;i++){
        var type = drawType[i];
        var drawLi = $("<li/>").attr("type", type.code).append($("<span/>").attr("title", type.label)
            .addClass("iconfont " + type.icon)).addClass("draw-tool");
        element.append(drawLi);

        drawLi.on("click", function () {
            $(element.find(".draw-tool")).removeClass("active");
            $(this).addClass("active");
            var _typeCode = $(this).attr("type");
            addDrawTool(_typeCode);
        })
    }

    var map = meteoMap,
        draw = null,
        select = new ol.interaction.Select(),
        edit = null,
        editLi, clearLi;
    var source = new ol.source.Vector();
    var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
    });
    map.addLayer(vector);

    edit = new ol.interaction.Modify({
        features: select.getFeatures()
    });
    edit.on('modifyend', function(evt) {
        if(options.editend) options.editend(evt);
    });
    select.setActive(false);
    edit.setActive(false);
    map.addInteraction(select);
    map.addInteraction(edit);

    clearLi = $("<li/>").attr("type", "clear").append($("<span/>").attr("title", "清除")
        .addClass("iconfont icon-clear"));
    element.append(clearLi);
    clearLi.on("click", function () {
        source.clear();
        draw.setActive(false);
        if(edit) {
            select.setActive(false);
            edit.setActive(false);
            editLi.hide();
        }
    });

    if(options.isEdit){
        editLi = $("<li/>").attr("type", "edit").append($("<span/>").attr("title", "编辑")
            .addClass("iconfont icon-edit"));
        element.append(editLi);
        editLi.hide();

        editLi.on("click", function () {
            if($(this).hasClass("active")){
                $(this).removeClass("active");
                select.setActive(false);
                edit.setActive(false);
            } else {
                $(this).addClass("active");
                select.setActive(true);
                edit.setActive(true);
            }
        })
    }

    function addDrawTool(type) {
        if(draw) map.removeInteraction(draw);

        draw = new ol.interaction.Draw({
            source: source,
            type: type,
            // geometryFunction: geometryFunction,
            freehand: options.freehand ? options.freehand : false //是否手绘
        });
        map.addInteraction(draw);

        //绘制结束事件
        draw.on("drawend", function (evt) {
           if(options.drawend) options.drawend(evt);
           draw.setActive(false);
            $(element.find(".draw-tool")).removeClass("active");

           if(options.isEdit) {
               editLi.show();
           }
        });
    }
    
    ol.control.Control.call(this, {
        element: element[0],
        target: null
    });
};
ol.inherits(ol.control.DrawTools, ol.control.Control);